<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../PPT/day02/mytools.js"></script>
    <style>
        table{
            border-collapse: collapse;
        }
        table tr td{
            border:1px solid red;
        }
        #xiuGai{
            display: none;
        }
    </style>
</head>

<body>
 <div>

     <div id="contentS">
         <table id="tables">
             <tr>
                 <td>作者</td>
                 <td>书籍名称</td>
                 <td>操作</td>
             </tr>
         </table>
     </div>
 </div>
 <div id="xiuGai">
     <form action="">
     <input type="text" name="booksName">
     <input type="text" name="booksJiage">
     <button>修改</button>
     </form>
 </div>
 <script type="text/javascript">
     var tables=document.getElementById("tables");
     var baseUrl="http://localhost:8888/books";
     var xhr=cohenLee.createXHR();
     xhr.open("get",baseUrl);
     xhr.send(null);
     xhr.onreadystatechange=function () {
         if(xhr.readyState==4){
             if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
                 listData(JSON.parse(xhr.responseText));
             }
         }
     };
     function listData(data) {
         for(var i=0;i<data.length;i++){
             var mtr=document.createElement("tr");
             tables.appendChild(mtr);

             var mtd=document.createElement("td");
             mtr.appendChild(mtd);
             mtd.innerHTML=data[i]["booksName"];
             mtd=document.createElement("td");
             mtr.appendChild(mtd);
             mtd.innerHTML=data[i]["booksJiage"];
             var deleteA=document.createElement("a");
             deleteA.setAttribute("href","#");
             deleteA.setAttribute("data-id",data[i]["id"]);
             deleteA.onclick=deleteHandle;
             deleteA.innerHTML="删除";
             var updateA=document.createElement("a");
             updateA.setAttribute("href","#");
             updateA.setAttribute("data-id",data[i]["id"]);
             updateA.innerHTML="修改";
             updateA.onclick=updateHandle;
             mtd=document.createElement("td");
             mtd.appendChild(deleteA);
             mtd.appendChild(updateA);
             mtr.appendChild(mtd);
         }
     }
     function deleteHandle() {
         xhr.open("delete",baseUrl+"/"+this.getAttribute("data-id"));
         xhr.setRequestHeader("Content-Type","application/json");
         var obj={};
         obj.id=this.getAttribute("data-id");
         xhr.send(JSON.stringify(obj));
         var t=this;
         xhr.onreadystatechange=function () {
             if(xhr.readyState==4){
                 if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                     t.parentNode.parentNode.remove();
                 }
             }
         }
     }
  function updateHandle() {
      var xiuGai=document.getElementById("xiuGai");
      xiuGai.style.display="block";
      var id=this.getAttribute("data-id");
      xhr.open("get",baseUrl+"/"+id);
      xhr.send(null);
      var t=this;
      var updateBtn=xiuGai.getElementsByTagName("button")[0];
      updateBtn.setAttribute("data-id",id);
      updateBtn.onclick=updateHandles;
      xhr.onreadystatechange=function () {
          if(xhr.readyState==4){
              if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
                  var data=null;
                  data=JSON.parse(xhr.responseText);
                  var inputs=xiuGai.getElementsByTagName("input");
                  for (var i=0;i<inputs.length;i++){
                      var atName=inputs[i].getAttribute("name");
                      inputs[i].setAttribute("value",data[atName]);
                  }
              }
          }
      }
  }
     function updateHandles(){
          var obj={};
         obj.id=this.getAttribute("data-id");
         var xiuGai=document.getElementById("xiuGai");
         var inputs=xiuGai.getElementsByTagName("input");
         for(var i=0;i<inputs.length;i++){
             obj[inputs[i].getAttribute("name")]=inputs[i].value;
         }
         ajax("put",baseUrl+"/"+this.getAttribute("data-id"),JSON.stringify(obj),"application/json",()=>{xiuGai.style.display="none";});
     }
function ajax(method,url, data, dataType, domHandle) {
    xhr.open(method,url);
    if (data == null){
        xhr.send(null);
    }else{
        if (dataType != null){
            xhr.setRequestHeader("Content-Type",dataType);	//设置请求传递数据的类型
        }
        xhr.send(data);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                domHandle(xhr.responseText);	//dom操作
            }
        }
    };

}
 </script>
</body>

</html>